<style>
.a1 {
  height: 800px;
  background: #353535;
  width: 700px;
  margin-left: 750px;
  border-radius: 10px;
  box-sizing: border-box;
  position: absolute;
  z-index: 0;
}

.head1 {
  height: 50px;
  color: white;
  border-radius: 10px;
  box-sizing: border-box
}

.head2 {
  height: 60px;
  width: 700px;
  box-sizing: border-box;

}

el-link {
  font-size: 30px;
  margin-top: 10px;
  color: #dbe3df;
}

.head3 {
  height: 900px;
  width: 700px;
  background: #353535;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  border-bottom-color: white;

}

.headright {
  height: 700px;
  width: 110px;
  background: #4dd8c9;
  float: right;
  box-sizing: border-box;
  z-index: 2;
  margin-top: 200px;
}

.head4 {
  height: 180px;
  width: 330px;
  background: #f143cc;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  margin-top: 700px;
  color: white;
  padding: 20px;
}

.head5 {
  height: 80px;
  width: 700px;
  background: #353535;
  position: absolute;
  z-index: 1;
  margin-top: 900px;
  box-sizing: border-box;
  border-top-color: white;
}

.age3 {
  width: 140px;
  height: 80px;
  float: left;
  padding-top: 10px;
}

.bt {
  float: left;
  font-size: 20px;
}

p {
  float: left;
}

</style>

<template>
  <div>
    <div class="a1">
    <div class="head1"><img height="50px" src="../assets/img.png" style="  border-radius: 10px" width="700px"></div>
    <div class="head2">
      <!--      <img height="55px" src="../assets/img_1.png" style="float: left; margin-left: 10px" width="60px">-->
      <span style="height: 50px; width: 50px; float: left; position: relative; top: 7px; right: -10px">
        <van-icon color="white" name="tv-o" size="2.3rem"/>
      </span>
      <van-tabs v-model="active" background="#353535" color="white" style="width: 650px;">
        <van-tab title="同城" title-style="color: white; font-size: 20px;"></van-tab>
        <van-tab title="关注" title-style="color: white; font-size: 20px;"></van-tab>
        <van-tab title="推荐" title-style="color: white; font-size: 20px;"></van-tab>
      </van-tabs>
      <div style="height: 50px; width: 50px; float: right; position: relative; top: -38px; right: 10px">
        <van-icon color="white" name="search" size="2.3rem"/>
      </div>
    </div>
    <div class="head3">
      <van-pull-refresh v-model="isLoading"  success-text="刷新成功" @refresh="onRefresh">
        <p style="color:white; font-size: 50px;">刷新次数: {{ count }}</p>
      </van-pull-refresh>
      <div class="headright"></div>
      <div class="head4">
        <span class="bt">@产品研究所</span><br>
        <p>谁说色彩斑斓的高保真原型就是好？所长\n带你来看看大厂的产品设计</p>
      </div>
    </div>
    <div class="head5">
      <div class="age3">
        <el-link>首页</el-link>
      </div>
      <div class="age3">
        <el-link @click="py()">朋友</el-link>
      </div>
      <div class="age3"><img height="55px" src="../assets/img_3.png" width="60px"></div>
      <div class="age3">
        <el-link @click="xx()">消息</el-link>
      </div>
      <div class="age3">
        <el-link @click="wd()">我的</el-link>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
// @ is an alias to /src

import Vue from 'vue';
import Vant, {Toast} from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
export default {
  data() {
    return {
      active: 3,
      count: 0,
      isLoading: false,
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    py() {
      this.$router.push('/py')
    }
    , xx() {
      this.$router.push('/xx')
    }
    , wd() {
      this.$router.push('/wd')
    }


  },
  created() {

  }
}

</script>
